اکنون در حال حاضر،
ما از این آرایه meetups ساختگی استفاده می کنیم
برای ارائه لیست جلسات ما.
و در صفحه جزئیات جلسه،
ما فقط چند داده ساختگی کدگذاری شده سخت داریم
و این واقع بینانه نیست.
در واقع، ما یک backend خواهیم داشت،
یک پایگاه داده که آن داده ها را نگه می دارد.
حالا بیایید شبیه سازی کنیم که انجام می دهیم
و بعداً ما واقعاً یکی خواهیم داشت،
اما اول از همه بیایید شبیه سازی کنیم که ما یکی داریم
و سپس جزء صفحه اصلی،
و به عنوان یک فایل route index.js، اجازه دهید از جلسات ساختگی عبور نکنیم
به محفظه ملاقات مانند این،
اما در عوض اجازه دهید این جزء را تغییر دهیم
آن گونه که می خواهد رفتار کند
اگر ما به یک باطن دسترسی داشته باشیم.
و معمولاً چگونه این کار را در React انجام می دهیم؟
خوب، اگر بخواهیم یک درخواست HTTP ارسال کنیم
زمانی که این صفحه رندر شد،
ما معمولاً از قلاب useEffect برای کنترل آن استفاده می کنیم.
بنابراین ما useEffect را وارد می کنیم
از React و سپس useEffect را در اینجا اجرا کنید
و یک آرایه وابستگی خالی داشته باشد، احتمالا،
به این معنی که این تابع تاثیر هر زمان اجرا می شود
کامپوننت ابتدا ارائه می شود، اما هرگز پس از آن.
و سپس در اینجا می توانیم داده های خود را واکشی کنیم
و ما می توانیم وضعیتی را برای این مؤلفه مدیریت کنیم
با قلاب useState، که بنابراین،
همچنین باید از React وارد شود.
و سپس در اینجا، می‌توانیم فهرست ملاقات‌هایمان را مدیریت کنیم.
فرض کنید loadedMeetups
و ما تابع به روز رسانی حالت setLoadedMeetups خود را داریم
و در useEffect،
ما آن درخواست HTTP را ارسال می کنیم و داده ها را واکشی می کنیم.
و پس از آن که این کار انجام شد،
البته این یک کار ناهمزمان خواهد بود،
اما وقتی این کار انجام شد، setLoadedMeetups را فراخوانی می کنیم
این را دوست داشته باشید و جلساتی را که ما واکشی کردیم تنظیم کنید
از یک سرور، جلسات مربوط به این مؤلفه را دارد.
و فعلا،
بیایید فقط شبیه سازی کنیم که ما ملاقات های ساختگی را واکشی کردیم.
البته، آنها از همان ابتدا در اینجا در دسترس هستند،
اما بیایید فرض کنیم که آنها را از یک سرور دریافت کرده ایم.
بنابراین برخی از وعده ها در اینجا تکمیل شد و ما پاسخ را دریافت کردیم.
و اکنون جلسات ساختگی خود را به عنوان جلسات بارگذاری شده تنظیم می کنم
و در اینجا در کد JSX، جلسات بارگذاری شده را پاس کردیم،
بنابراین ایالت ما به لیست ملاقات.
اگر همه این کارها را انجام دهیم،
اگر از صفحه شروع با تمام جلسات بازدید کنیم،
ما هیچ تفاوتی در آنجا نمی بینیم.
وقتی دوباره بارگذاری می‌کنم، همه ملاقات‌ها آنجا هستند،
درست از آغاز
زیرا ما هرگز واقعاً یک درخواست HTTP ارسال نمی کنیم.
اما از نظر فنی یک تفاوت وجود دارد
زیرا مهم است که توجه داشته باشید که useEffect
طوری کار می کند که این تابع را اجرا می کند
بعد از اهمیت، پس از اجرای تابع جزء.
پس این بدان معناست که
اولین باری که این مؤلفه صفحه اصلی ارائه می شود،
loadedMeetups یک آرایه خالی خواهد بود.
سپس این تابع افکت اجرا خواهد شد،
سپس وضعیت را به روز می کند
و سپس این تابع جزء دوباره اجرا می شود
چون حالت عوض شد
و سپس لیست را دوباره رندر می کند
با داده های واقعی
اما ما دو چرخه رندر مؤلفه خواهیم داشت.
و در اولین چرخه رندر،
اولین باری که این کامپوننت رندر می شود،
حالت loadedMeetups این حالت اولیه خواهد بود،
این آرایه خالی
حالا چرا روی این موضوع تاکید می کنم؟
زیرا اگر این را از یک باطن دریافت کنیم،
کاربران ما ممکن است به طور خلاصه یک اسپینر بارگیری را ببینند،
که می تواند یا نمی تواند تجربه کاربر باشد
ما می خواهیم ارائه دهیم
اما علاوه بر این، حتی در اینجا که در آن ما واقعا نیست
ارسال درخواست و جایی که پاسخ،
حتی در این مورد "اصولاً، فورا" می رسد.
به دلیل این دو چرخه رندر،
ما با بهینه سازی موتور جستجو مشکل داریم.
اگر منبع صفحه را مشاهده کردم متوجه خواهید شد
که در آنجا، داده های ملاقات واقعی وجود ندارد.
من لیست نامرتب خود را اینجا دریافت کردم
و این لیست نامرتب خالی است.
بنابراین مواردی که در اینجا روی صفحه می بینیم،
این موارد در محتوای HTML وجود ندارد.
در صفحه HTML که از سرور دریافت کردیم
و آنها گم شده اند زیرا فقط ارائه شده اند
در چرخه اجرای جزء دوم
اما صفحه HTML از پیش رندر شده تولید شد
توسط NextJS به طور خودکار منتظر نمی ماند
برای این چرخه دوم
همیشه نتیجه اولین چرخه رندر را می گیرد
و stat را به عنوان کد HTML از پیش رندر شده برگردانید.
و در آنجا، این داده از دست رفته است.
حالا، البته، اینجا،
با داده های ساختگی،
انجام این کار زائد است.
اما همانطور که گفتم، ما اساساً فقط شبیه سازی می کنیم
که ما این داده ها را از یک سرور واکشی می کنیم
و سپس با این مشکل روبرو خواهیم شد که NextJS منتظر نمی ماند
برای اینکه آن داده ها واکشی شوند،
سپس صفحه کاملاً از پیش رندر شده را برگردانید،
اما نتیجه را برمی گرداند
از اولین مولفه چرخه ارائه شده است.
و ممکن است یک صفحه کاملاً خالی باشد.
و این حالا، توضیحی طولانی بود
از مشکلی که در اینجا با آن روبرو هستیم،
اما مشکل مهمی است
و درک درست این مشکل مهم است.
اما خوشبختانه NextJS نیز راه حل هایی برای این مشکل دارد.
ویژگی های اصلی بیشتری در NextJS تعبیه شده است که به ما کمک می کند
دقیقا با این مشکل
که می‌خواهیم یک صفحه با داده را از قبل رندر کنیم،
اما با داده هایی که باید منتظر بمانیم.
و ما باید به NextJS بگوییم، زمانی که انتظارمان تمام شد
و بنابراین این همان چیزی است که ما می رویم
برای کاوش بعدی،
چگونه می توانیم داده ها را برای پیش رندر واکشی کنیم.